<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.ScrollBar.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.ScrollBar.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.ScrollBar.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;이미지&nbsp;스크롤바&nbsp;컴포넌트
	@author&nbsp;senxation
	@version&nbsp;#__VERSION__#
**/
/**
	이미지&nbsp;스크롤바&nbsp;컴포넌트
	ScrollBar&nbsp;컴포넌트는&nbsp;정해진&nbsp;크기의&nbsp;박스내의&nbsp;내용을&nbsp;스크롤바를&nbsp;이용해&nbsp;이동하여&nbsp;볼&nbsp;수&nbsp;있게합니다.
	스크롤바의&nbsp;위치와&nbsp;크기는&nbsp;마크업의&nbsp;정의에&nbsp;따라&nbsp;커스터마이징할&nbsp;수&nbsp;있습니다.
	박스내&nbsp;내용이&nbsp;고정되어있고&nbsp;변하지&nbsp;않는&nbsp;경우에&nbsp;사용합니다.
	
	@class&nbsp;jindo.ScrollBar
	@extends&nbsp;jindo.UIComponent
	@uses&nbsp;jindo.Slider
	@uses&nbsp;jindo.RolloverArea
	@uses&nbsp;jindo.Transition
	@keyword&nbsp;scrollbar,&nbsp;스크롤바
**/
jindo.ScrollBar&nbsp;=&nbsp;new&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.ScrollBar.prototype&nbsp;*/

	_bMouseEnter&nbsp;:&nbsp;false,
	_bIsEventAttachedForCommon&nbsp;:&nbsp;false,
	_bIsEventAttachedForVertical&nbsp;:&nbsp;false,
	_bIsEventAttachedForHorizontal&nbsp;:&nbsp;false,
	
	/**
		@constructor
		@param&nbsp;{HTMLElement}&nbsp;el
		@param&nbsp;{Object}&nbsp;[oOption]&nbsp;옵션
			@param&nbsp;{String}&nbsp;[oOption.sClassPrefix=&quot;scrollbar-&quot;]&nbsp;클래스명&nbsp;접두어
			@param&nbsp;{Number}&nbsp;[oOption.nDelta=16]&nbsp;스크롤&nbsp;속도
			@param&nbsp;{String}&nbsp;[oOption.sClassNameForRollover=&quot;rollover&quot;]&nbsp;Rollover에&nbsp;반응할&nbsp;클래스명
			@param&nbsp;{Boolean}&nbsp;[oOption.bActivateOnload=true]&nbsp;컴포넌트&nbsp;로드시&nbsp;activate()&nbsp;수행여부
		@example
			var&nbsp;oScrollBar&nbsp;=&nbsp;new&nbsp;jindo.ScrollBar(&quot;scroll&quot;,&nbsp;{
				sClassPrefix&nbsp;:&nbsp;&quot;scrollbar-&quot;,&nbsp;//&nbsp;(String)&nbsp;Class&nbsp;Prefix
				nDelta&nbsp;:&nbsp;16,&nbsp;//&nbsp;(Number)&nbsp;스크롤&nbsp;속도
				sClassNameForRollover&nbsp;:&nbsp;&quot;rollover&quot;,&nbsp;//&nbsp;(String)&nbsp;Rollover에&nbsp;반응할&nbsp;class&nbsp;명
				bActivateOnload&nbsp;:&nbsp;true
			}).attach({
				scroll&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					//스크롤위치가&nbsp;바뀔&nbsp;때&nbsp;마다&nbsp;발생
					//전달되는&nbsp;이벤트&nbsp;객체&nbsp;oCustomEvent&nbsp;=&nbsp;{
					//	sDirection&nbsp;:&nbsp;(String)&nbsp;&quot;left&quot;&nbsp;또는&nbsp;&quot;top&quot;
					//	nPosition&nbsp;:&nbsp;(Number)&nbsp;스크롤된&nbsp;위치
					//}
				}
			});
	**/	
	$init&nbsp;:&nbsp;function(el,&nbsp;oOption)&nbsp;{
		
		this.option({
			sClassPrefix&nbsp;:&nbsp;&quot;scrollbar-&quot;,
			nDelta&nbsp;:&nbsp;16,&nbsp;//스크롤&nbsp;속도
			sClassNameForRollover&nbsp;:&nbsp;&quot;rollover&quot;,&nbsp;//&nbsp;(String)&nbsp;Rollover에&nbsp;반응할&nbsp;class&nbsp;명
			bActivateOnload&nbsp;:&nbsp;true
		});
		
		this.option(oOption&nbsp;||&nbsp;{});
		
		this._el&nbsp;=&nbsp;jindo.$(el);
		
		this._oTimer&nbsp;=&nbsp;new&nbsp;jindo.Timer();
		this._oTransition&nbsp;=&nbsp;new&nbsp;jindo.Transition().fps(30);
		
		this._wfOnMouseEnter&nbsp;=&nbsp;jindo.$Fn(this._onMouseEnter,&nbsp;this);
		this._wfOnMouseLeave&nbsp;=&nbsp;jindo.$Fn(this._onMouseLeave,&nbsp;this);
		
		this._wfOnWheel&nbsp;=&nbsp;jindo.$Fn(this._onWheel,&nbsp;this);
		this._wfOnMouseUp&nbsp;=&nbsp;jindo.$Fn(this._onMouseUp,&nbsp;this);

		this._assignHTMLElements();
		this._initialize4Tablet();
		
		if&nbsp;(this.option(&quot;bActivateOnload&quot;))&nbsp;{
			this.activate();
		}
	},
	
	_assignHTMLElements&nbsp;:&nbsp;function(){
		var&nbsp;el&nbsp;=&nbsp;this._el,
			sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;);

		this._elBox&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;box&quot;,&nbsp;el);
		this._elContent&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;content&quot;,&nbsp;el);
		
		var&nbsp;welBox&nbsp;=&nbsp;jindo.$Element(this._elBox),
			welContent&nbsp;=&nbsp;jindo.$Element(this._elContent);
			
		this._oBoxSize&nbsp;=&nbsp;{
			nWidth:&nbsp;welBox.width(),
			nHeight:&nbsp;welBox.height()
		};
		
		this._oContentSize&nbsp;=&nbsp;{
			nWidth:&nbsp;welContent.width(),
			nHeight:&nbsp;welContent.height()
		};

		this._oHorizontal&nbsp;=&nbsp;{
			elScrollBar&nbsp;:&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;h&quot;,&nbsp;el)
		};
		
		var&nbsp;oH&nbsp;=&nbsp;this._oHorizontal;
		if&nbsp;(oH.elScrollBar)&nbsp;{
			oH.elTrack&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;track&quot;,&nbsp;oH.elScrollBar);
			oH.elThumb&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;thumb&quot;,&nbsp;oH.elTrack);
			oH.elThumbHead&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;thumb-head&quot;,&nbsp;oH.elThumb);
			oH.elThumbBody&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;thumb-body&quot;,&nbsp;oH.elThumb);
			oH.elThumbFoot&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;thumb-foot&quot;,&nbsp;oH.elThumb);			
			oH.elButtonLeft&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;button-left&quot;,&nbsp;oH.elScrollBar);
			oH.elButtonRight&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;button-right&quot;,&nbsp;oH.elScrollBar);
		}
		
		this._oVertical&nbsp;=&nbsp;{
			elScrollBar&nbsp;:&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;v&quot;,&nbsp;el)
		};
		var&nbsp;oV&nbsp;=&nbsp;this._oVertical;
		if&nbsp;(oV.elScrollBar)&nbsp;{
			oV.elTrack&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;track&quot;,&nbsp;oV.elScrollBar);
			oV.elThumb&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;thumb&quot;,&nbsp;oV.elTrack);
			oV.elThumbHead&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;thumb-head&quot;,&nbsp;oV.elThumb);
			oV.elThumbBody&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;thumb-body&quot;,&nbsp;oV.elThumb);
			oV.elThumbFoot&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;+sClassPrefix+&quot;thumb-foot&quot;,&nbsp;oV.elThumb);
			oV.elButtonUp&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;button-up&quot;,&nbsp;oV.elScrollBar);
			oV.elButtonDown&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sClassPrefix&nbsp;+&nbsp;&quot;button-down&quot;,&nbsp;oV.elScrollBar);
		}
	},
	
	/**
		box&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getBox
		@return&nbsp;{HTMLElement}
	**/
	getBox&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elBox;
	},
	
	/**
		content&nbsp;엘리먼트를&nbsp;가져온다
		
		@method&nbsp;getContent
		@return&nbsp;{HTMLElement}
	**/
	getContent&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elContent;
	},
	
	/**
		초기&nbsp;로딩시&nbsp;정해진&nbsp;박스의&nbsp;크기를&nbsp;가져온다.
		
		@method&nbsp;getDefaultBoxSize
		@return&nbsp;{Object}
		@example
			var&nbsp;oSize&nbsp;=&nbsp;{
				nWidth&nbsp;:&nbsp;(Number),&nbsp;
				nHeight&nbsp;:&nbsp;(Number)
			}
	**/
	getDefaultBoxSize&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oBoxSize;
	},
	
	/**
		초기&nbsp;로딩시&nbsp;정해진&nbsp;박스의&nbsp;크기를&nbsp;가져온다.
		
		@method&nbsp;getDefaultContentSize
		@return&nbsp;{Object}
		@example
			var&nbsp;oSize&nbsp;=&nbsp;{
				nWidth&nbsp;:&nbsp;(Number),&nbsp;
				nHeight&nbsp;:&nbsp;(Number)
			}
	**/
	getDefaultContentSize&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oContentSize;
	},
	
	/**
		가로&nbsp;스크롤바에&nbsp;해당하는&nbsp;HTMLElement&nbsp;객체들을&nbsp;가져온다.
		
		@method&nbsp;getScrollBarHorizontal
		@return&nbsp;{Object}
		@example
			var&nbsp;oScrollBarHorizontal&nbsp;=&nbsp;{
				elScrollBar&nbsp;:&nbsp;(HTMLElement),
				elTrack&nbsp;:&nbsp;(HTMLElement),
				elThumb&nbsp;:&nbsp;(HTMLElement),
				elThumbHead&nbsp;:&nbsp;(HTMLElement),
				elThumbBody&nbsp;:&nbsp;(HTMLElement),
				elThumbFoot&nbsp;:&nbsp;(HTMLElement),
				elButtonLeft&nbsp;:&nbsp;(HTMLElement),&nbsp;
				elButtonRight&nbsp;:&nbsp;(HTMLElement)
			}
	**/
	getScrollBarHorizontal&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oHorizontal;
	},
	
	/**
		세로&nbsp;스크롤바에&nbsp;해당하는&nbsp;HTMLElement&nbsp;객체들을&nbsp;가져온다.
		
		@method&nbsp;getScrollBarVertical
		@return&nbsp;{Object}
		@example
			var&nbsp;oScrollBarVertical&nbsp;=&nbsp;{
				elScrollBar&nbsp;:&nbsp;(HTMLElement),
				elTrack&nbsp;:&nbsp;(HTMLElement),
				elThumb&nbsp;:&nbsp;(HTMLElement),
				elThumbHead&nbsp;:&nbsp;(HTMLElement),
				elThumbBody&nbsp;:&nbsp;(HTMLElement),
				elThumbFoot&nbsp;:&nbsp;(HTMLElement),
				elButtonUp&nbsp;:&nbsp;(HTMLElement),&nbsp;
				elButtonDown&nbsp;:&nbsp;(HTMLElement)
			}
	**/
	getScrollBarVertical&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oVertical;
	},
	
	/**
		가로&nbsp;스크롤에&nbsp;해당하는&nbsp;슬라이더&nbsp;객체를&nbsp;가져온다.
		
		@method&nbsp;getSliderHorizontal
		@return&nbsp;{jindo.Slider}
	**/
	getSliderHorizontal&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oSliderHorizontal&nbsp;||&nbsp;null;
	},
	
	/**
		세로&nbsp;스크롤에&nbsp;해당하는&nbsp;슬라이더&nbsp;객체를&nbsp;가져온다.
		
		@method&nbsp;getSliderVertical
		@return&nbsp;{jindo.Slider}
	**/
	getSliderVertical&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oSliderVertical&nbsp;||&nbsp;null;
	},
	
	/**
		RolloverArea&nbsp;객체를&nbsp;가져온다.
		
		@method&nbsp;getRolloverArea
		@return&nbsp;{jindo.RolloverArea}
	**/
	getRolloverArea&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._oRolloverArea;
	},
	
	_attachEvent&nbsp;:&nbsp;function(sDirection)&nbsp;{
		var&nbsp;sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;),
			self&nbsp;=&nbsp;this,
			oH&nbsp;=&nbsp;this.getScrollBarHorizontal(),
			oV&nbsp;=&nbsp;this.getScrollBarVertical();	
		
		function&nbsp;attach(o)&nbsp;{
			if&nbsp;(o.elScrollBar)&nbsp;{
				var&nbsp;sClassNameForRollover&nbsp;=&nbsp;self.option(&quot;sClassNameForRollover&quot;);
				jindo.$Element(o.elTrack).addClass(sClassNameForRollover);
				jindo.$Element(o.elThumb).addClass(sClassNameForRollover);
				if&nbsp;(o.elButtonLeft)&nbsp;{
					jindo.$Element(o.elButtonLeft).addClass(sClassNameForRollover);	
				}
				if&nbsp;(o.elButtonRight)&nbsp;{
					jindo.$Element(o.elButtonRight).addClass(sClassNameForRollover);
				}
				if&nbsp;(o.elButtonUp)&nbsp;{
					jindo.$Element(o.elButtonUp).addClass(sClassNameForRollover);
				}
				if&nbsp;(o.elButtonDown)&nbsp;{
					jindo.$Element(o.elButtonDown).addClass(sClassNameForRollover);
				}
			}
		}
		
		function&nbsp;attachH()&nbsp;{
			if&nbsp;(!self._bIsEventAttachedForHorizontal)&nbsp;{
				attach(oH);
			}
			self._bIsEventAttachedForHorizontal&nbsp;=&nbsp;true;
		}
		
		function&nbsp;attachV()&nbsp;{
			if&nbsp;(!self._bIsEventAttachedForVertical)&nbsp;{
				attach(oV);
			}
			self._bIsEventAttachedForVertical&nbsp;=&nbsp;true;
		}
		
		//공통&nbsp;이벤트
		if(!this._bIsEventAttachedForCommon)&nbsp;{
			this._initSliders();
			this._initRolloverArea();
			
			this._wfOnMouseEnter.attach(this._el,&nbsp;&quot;mouseenter&quot;);
			this._wfOnMouseLeave.attach(this._el,&nbsp;&quot;mouseleave&quot;);
			this._wfOnWheel.attach(document,&nbsp;&quot;mousewheel&quot;);
			this._wfOnMouseUp.attach(document,&nbsp;&quot;mouseup&quot;);
			this._bIsEventAttachedForCommon&nbsp;=&nbsp;true;
			jindo.$Element(this._el).removeClass(sClassPrefix&nbsp;+&nbsp;&quot;noscript&quot;);
		}

		//방향이&nbsp;없으면&nbsp;전부
		if&nbsp;(!sDirection)&nbsp;{
			attachH();
			attachV();
		}
		if&nbsp;(sDirection&nbsp;==&nbsp;&quot;horizontal&quot;)&nbsp;{
			attachH();
		}
		if&nbsp;(sDirection&nbsp;==&nbsp;&quot;vertical&quot;)&nbsp;{
			attachV();
		}
	},
	
	_detachEvent&nbsp;:&nbsp;function(sDirection)&nbsp;{
		var&nbsp;sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;),
			self&nbsp;=&nbsp;this,
			oH&nbsp;=&nbsp;this.getScrollBarHorizontal(),
			oV&nbsp;=&nbsp;this.getScrollBarVertical();	
		
		function&nbsp;detach(o)&nbsp;{
			if&nbsp;(o.elScrollBar)&nbsp;{
				var&nbsp;sClassNameForRollover&nbsp;=&nbsp;self.option(&quot;sClassNameForRollover&quot;);
				jindo.$Element(o.elTrack).removeClass(sClassNameForRollover);
				jindo.$Element(o.elThumb).removeClass(sClassNameForRollover);
				if&nbsp;(o.elButtonLeft)&nbsp;{
					jindo.$Element(o.elButtonLeft).removeClass(sClassNameForRollover);	
				}
				if&nbsp;(o.elButtonRight)&nbsp;{
					jindo.$Element(o.elButtonRight).removeClass(sClassNameForRollover);
				}
				if&nbsp;(o.elButtonUp)&nbsp;{
					jindo.$Element(o.elButtonUp).removeClass(sClassNameForRollover);
				}
				if&nbsp;(o.elButtonDown)&nbsp;{
					jindo.$Element(o.elButtonDown).removeClass(sClassNameForRollover);
				}
			}
		}
		
		function&nbsp;detachH()&nbsp;{
			if&nbsp;(self._bIsEventAttachedForHorizontal)&nbsp;{
				detach(oH);
			}
			self._bIsEventAttachedForHorizontal&nbsp;=&nbsp;false;
		}
		
		function&nbsp;detachV()&nbsp;{
			if&nbsp;(self._bIsEventAttachedForVertical)&nbsp;{
				detach(oV);
			}
			self._bIsEventAttachedForVertical&nbsp;=&nbsp;false;
		}

		//방향이&nbsp;없으면&nbsp;전부
		if&nbsp;(!sDirection)&nbsp;{
			detachH();
			detachV();
		}
		else&nbsp;if&nbsp;(sDirection&nbsp;==&nbsp;&quot;horizontal&quot;)&nbsp;{
			detachH();
		}
		else&nbsp;if&nbsp;(sDirection&nbsp;==&nbsp;&quot;vertical&quot;)&nbsp;{
			detachV();
		}

		//공통&nbsp;이벤트
		if(this._bIsEventAttachedForCommon&nbsp;&amp;&amp;&nbsp;!this._bIsEventAttachedForHorizontal&nbsp;&amp;&amp;&nbsp;!this._bIsEventAttachedForVertical)&nbsp;{
			this._wfOnMouseEnter.detach(this._el,&nbsp;&quot;mouseenter&quot;);
			this._wfOnMouseLeave.detach(this._el,&nbsp;&quot;mouseleave&quot;);
			this._wfOnWheel.detach(document,&nbsp;&quot;mousewheel&quot;);
			this._wfOnMouseUp.detach(document,&nbsp;&quot;mouseup&quot;);
			this._bMouseEnter&nbsp;=&nbsp;false;
			this._bIsEventAttachedForCommon&nbsp;=&nbsp;false;
			this.getRolloverArea().deactivate();
			jindo.$Element(this._el).addClass(sClassPrefix&nbsp;+&nbsp;&quot;noscript&quot;);	
		}
	},
	
	_activateH&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;oSliderH&nbsp;=&nbsp;this.getSliderHorizontal();
		if&nbsp;(oSliderH)&nbsp;{
			oSliderH.activate();
			this.getBox().scrollLeft&nbsp;=&nbsp;0;
			this.setScrollLeft(0);
		}
	},
	
	_activateV&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;oSliderV&nbsp;=&nbsp;this.getSliderVertical();
		if&nbsp;(oSliderV)&nbsp;{
			oSliderV.activate();
			this.getBox().scrollTop&nbsp;=&nbsp;0;
			this.setScrollTop(0);
		}
	},
	
	/**
		스크롤바의&nbsp;동작을&nbsp;활성화한다.
		@param&nbsp;{String}&nbsp;sDirection&nbsp;&quot;vertical&quot;&nbsp;||&nbsp;&quot;horizontal&quot;&nbsp;||&nbsp;null
	**/
	_onActivate&nbsp;:&nbsp;function(sDirection)&nbsp;{
		this._attachEvent(sDirection&nbsp;||&nbsp;null);
		this._activate4Tablet();
		
		if(!sDirection)&nbsp;{
			this._activateH();
			this._activateV();
			jindo.$Element(this._el).removeClass(this.option(&quot;sClassPrefix&quot;)&nbsp;+&nbsp;&quot;noscript&quot;);
			return;
		}
		if(sDirection&nbsp;==&nbsp;&quot;horizontal&quot;)&nbsp;{
			this._activateH();
			return;
		}
		if(sDirection&nbsp;==&nbsp;&quot;vertical&quot;)&nbsp;{
			this._activateV();
			return;
		}
	},
	
	_deactivateH&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;oSliderH&nbsp;=&nbsp;this.getSliderHorizontal();
		if&nbsp;(oSliderH)&nbsp;{
			oSliderH.deactivate();
			this.getContent().style.left&nbsp;=&nbsp;&quot;0px&quot;;
			this.getBox().scrollLeft&nbsp;=&nbsp;0;
		}
	},
	
	_deactivateV&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;oSliderV&nbsp;=&nbsp;this.getSliderVertical();
		if&nbsp;(oSliderV)&nbsp;{
			oSliderV.deactivate();
			this.getContent().style.top&nbsp;=&nbsp;&quot;0px&quot;;
			this.getBox().scrollTop&nbsp;=&nbsp;0;
		}
	},
	
	/**
		스크롤바의&nbsp;동작을&nbsp;비활성화한다.
		@param&nbsp;{String}&nbsp;sDirection&nbsp;&quot;vertical&quot;&nbsp;||&nbsp;&quot;horizontal&quot;&nbsp;||&nbsp;null
	**/
	_onDeactivate&nbsp;:&nbsp;function(sDirection)&nbsp;{
		this._detachEvent(sDirection&nbsp;||&nbsp;null);
		this._deactivate4Tablet();
		
		if(!sDirection)&nbsp;{
			this._deactivateH();
			this._deactivateV();
			jindo.$Element(this._el).addClass(this.option(&quot;sClassPrefix&quot;)&nbsp;+&nbsp;&quot;noscript&quot;);
			return;
		}
		if(sDirection&nbsp;==&nbsp;&quot;horizontal&quot;)&nbsp;{
			this._deactivateH();
			return;
		}
		if(sDirection&nbsp;==&nbsp;&quot;vertical&quot;)&nbsp;{
			this._deactivateV();
			return;
		}
	},
	
	_initSliders&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;self&nbsp;=&nbsp;this,
			sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;),
			oH&nbsp;=&nbsp;this.getScrollBarHorizontal(),
			oV&nbsp;=&nbsp;this.getScrollBarVertical();		
		
		if&nbsp;(oH.elScrollBar)&nbsp;{

			this._nScrollWidth&nbsp;=&nbsp;jindo.$Element(this._elContent).width()&nbsp;-&nbsp;jindo.$Element(this._elBox).width();
			
			this._oSliderHorizontal&nbsp;=&nbsp;new&nbsp;jindo.Slider(oH.elTrack,&nbsp;{
				sClassPrefix:&nbsp;sClassPrefix,
				bVertical:&nbsp;false,
				nMinValue:&nbsp;0,
				nMaxValue:&nbsp;this._nScrollWidth
			});
			this._oSliderHorizontal._oTransition&nbsp;=&nbsp;new&nbsp;jindo.Transition().fps(30);
			
			this._oSliderHorizontal.attach({
				beforeChange:&nbsp;function(oCustomEvent){
					var&nbsp;nTrackWidth&nbsp;=&nbsp;jindo.$Element(this.getTrack()).width(),
						nThumbWidth&nbsp;=&nbsp;jindo.$Element(this.getThumb(oCustomEvent.nIndex)).width(),
						nAvailWidth&nbsp;=&nbsp;nTrackWidth&nbsp;-&nbsp;nThumbWidth;
					
					oCustomEvent.nPos&nbsp;=&nbsp;Math.min(oCustomEvent.nPos,&nbsp;nAvailWidth);&nbsp;
					oCustomEvent.nPos&nbsp;=&nbsp;Math.max(oCustomEvent.nPos,&nbsp;0);

					if&nbsp;(oCustomEvent.bJump)&nbsp;{
						oCustomEvent.stop();
						
						this._oTransition.abort().start(200,&nbsp;this.getThumb(oCustomEvent.nIndex),&nbsp;{
							&quot;@left&quot;&nbsp;:&nbsp;jindo.Effect.easeOut(oCustomEvent.nPos&nbsp;+&nbsp;&#39;px&#39;)&nbsp;
						}).attach({
							playing&nbsp;:&nbsp;function(oCustomEvent2)&nbsp;{
								self.setScrollLeft(self._oSliderHorizontal._getValue(0,&nbsp;parseInt(oCustomEvent2.sValue,&nbsp;10)));
							}
						});
					}&nbsp;else&nbsp;{
						self.setScrollLeft(this._getValue(0,&nbsp;oCustomEvent.nPos));
					}
				}
			});
			
		}
		
		if&nbsp;(oV.elScrollBar)&nbsp;{
			this._nScrollHeight&nbsp;=&nbsp;jindo.$Element(this._elContent).height()&nbsp;-&nbsp;jindo.$Element(this._elBox).height();

			this._oSliderVertical&nbsp;=&nbsp;new&nbsp;jindo.Slider(oV.elTrack,&nbsp;{
				sClassPrefix:&nbsp;sClassPrefix,
				bVertical:&nbsp;true,
				nMinValue:&nbsp;0,
				nMaxValue:&nbsp;this._nScrollHeight
			});
			this._oSliderVertical._oTransition&nbsp;=&nbsp;new&nbsp;jindo.Transition().fps(30);
			
			this._oSliderVertical.attach({
				beforeChange:&nbsp;function(oCustomEvent){
					var&nbsp;nTrackHeight&nbsp;=&nbsp;jindo.$Element(this.getTrack()).height(),
						nThumbHeight&nbsp;=&nbsp;jindo.$Element(this.getThumb(oCustomEvent.nIndex)).height(),
						nAvailHeight&nbsp;=&nbsp;nTrackHeight&nbsp;-&nbsp;nThumbHeight;
					
					oCustomEvent.nPos&nbsp;=&nbsp;Math.min(oCustomEvent.nPos,&nbsp;nAvailHeight);&nbsp;
					oCustomEvent.nPos&nbsp;=&nbsp;Math.max(oCustomEvent.nPos,&nbsp;0);

					if&nbsp;(oCustomEvent.bJump)&nbsp;{
						oCustomEvent.stop();
						this._oTransition.abort().start(200,&nbsp;this.getThumb(oCustomEvent.nIndex),&nbsp;{
							&quot;@top&quot;&nbsp;:&nbsp;jindo.Effect.easeOut(oCustomEvent.nPos&nbsp;+&nbsp;&#39;px&#39;)&nbsp;
						}).attach({
							playing&nbsp;:&nbsp;function(oCustomEvent2)&nbsp;{
								self.setScrollTop(self._oSliderVertical.values(0));
							}
						});
					}&nbsp;else&nbsp;{
						self.setScrollTop(this._getValue(0,&nbsp;oCustomEvent.nPos));
					}
				}
			});
			
		}		
		
	},

	_initRolloverArea&nbsp;:&nbsp;function(){
		var&nbsp;self&nbsp;=&nbsp;this,
			sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;),
			sClassNameForRollover&nbsp;=&nbsp;this.option(&quot;sClassNameForRollover&quot;);
			
		this._oRolloverArea&nbsp;=&nbsp;new&nbsp;jindo.RolloverArea(this._el,&nbsp;{
			sClassName&nbsp;:&nbsp;sClassNameForRollover,&nbsp;//&nbsp;(String)&nbsp;컴포넌트가&nbsp;적용될&nbsp;엘리먼트의&nbsp;class&nbsp;명.&nbsp;상위&nbsp;기준&nbsp;엘리먼트의&nbsp;자식&nbsp;중&nbsp;해당&nbsp;클래스명을&nbsp;가진&nbsp;모든&nbsp;엘리먼트에&nbsp;Rollover&nbsp;컴포넌트가&nbsp;적용된다.
			sClassPrefix&nbsp;:&nbsp;sClassPrefix&nbsp;//&nbsp;(String)&nbsp;컴포넌트가&nbsp;적용될&nbsp;엘리먼트에&nbsp;붙게될&nbsp;class명의&nbsp;prefix.&nbsp;(prefix+&quot;over|down&quot;)
		}).attach({
			over:&nbsp;function(oCustomEvent){
				oCustomEvent.stop();
				self._onRollover(&quot;over&quot;,&nbsp;oCustomEvent.element);
			},
			down:&nbsp;function(oCustomEvent){
				oCustomEvent.stop();
				self._onMouseDown(oCustomEvent.element);
				self._onRollover(&quot;down&quot;,&nbsp;oCustomEvent.element);
			},
			up:&nbsp;function(oCustomEvent){
				oCustomEvent.stop();
				self._onMouseUp(oCustomEvent.element);
				self._onRollover(&quot;up&quot;,&nbsp;oCustomEvent.element);
			},
			out:&nbsp;function(oCustomEvent){
				oCustomEvent.stop();
				self._onRollover(&quot;out&quot;,&nbsp;oCustomEvent.element);
			}
		});
	},
	
	/**
		content의&nbsp;내용의&nbsp;크기가&nbsp;달라졌을때&nbsp;스크롤바의&nbsp;이동&nbsp;값을&nbsp;재설정해준다.
		
		@method&nbsp;reset
	**/	
	reset&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;oSliderH&nbsp;=&nbsp;this.getSliderHorizontal(),
			oSliderV&nbsp;=&nbsp;this.getSliderVertical();
		
		if&nbsp;(oSliderH)&nbsp;{
			this._nScrollWidth&nbsp;=&nbsp;jindo.$Element(this._elContent).width()&nbsp;-&nbsp;jindo.$Element(this._elBox).width();
			oSliderH.option(&quot;nMaxValue&quot;,&nbsp;this._nScrollWidth);
			this.setScrollLeft(0);
		}
		if&nbsp;(oSliderV)&nbsp;{
			this._nScrollHeight&nbsp;=&nbsp;jindo.$Element(this._elContent).height()&nbsp;-&nbsp;jindo.$Element(this._elBox).height();
			oSliderV.option(&quot;nMaxValue&quot;,&nbsp;this._nScrollHeight);
			this.setScrollTop(0);			
		}
		
		this._elBox.scrollLeft&nbsp;=&nbsp;0;
		this._elBox.scrollTop&nbsp;=&nbsp;0;		
	},
	
	/**
		가로&nbsp;스크롤이&nbsp;화면에&nbsp;표시되었는지&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;hasScrollBarHorizontal
		@return&nbsp;{Boolean}&nbsp;
	**/
	hasScrollBarHorizontal&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;),
			o&nbsp;=&nbsp;this.getScrollBarHorizontal();
		
		if&nbsp;(o.elScrollBar)&nbsp;{
			var&nbsp;welScrollBar&nbsp;=&nbsp;jindo.$Element(o.elScrollBar);
			return&nbsp;welScrollBar.visible()&nbsp;||&nbsp;welScrollBar.hasClass(sClassPrefix&nbsp;+&nbsp;&quot;show&quot;);	
		}
		return&nbsp;false;
		
	},
	
	/**
		세로&nbsp;스크롤이&nbsp;화면에&nbsp;표시되었는지&nbsp;여부를&nbsp;가져온다.
		
		@method&nbsp;hasScrollBarVertical
		@return&nbsp;{Boolean}&nbsp;
	**/
	hasScrollBarVertical&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;),
			o&nbsp;=&nbsp;this.getScrollBarVertical();
		
		if&nbsp;(o.elScrollBar)&nbsp;{
			var&nbsp;welScrollBar&nbsp;=&nbsp;jindo.$Element(o.elScrollBar);
			return&nbsp;welScrollBar.visible()&nbsp;||&nbsp;welScrollBar.hasClass(sClassPrefix&nbsp;+&nbsp;&quot;show&quot;);
		}
		return&nbsp;false;
	},
	
	/**
		세로&nbsp;스크롤바의&nbsp;포지션을&nbsp;설정한다.
		
		@method&nbsp;setScrollTop
		@param&nbsp;{Number}&nbsp;n&nbsp;포지션&nbsp;값
		@remark&nbsp;0.1.2&nbsp;버전부터&nbsp;slider&nbsp;0.3.2버전&nbsp;필요
	**/
	setScrollTop&nbsp;:&nbsp;function(n)&nbsp;{
		n&nbsp;=&nbsp;Math.min(n,&nbsp;this._nScrollHeight);
		n&nbsp;=&nbsp;Math.max(n,&nbsp;0);
		n&nbsp;=&nbsp;Math.round(n);
		
		var&nbsp;htParam&nbsp;=&nbsp;{
			sDirection&nbsp;:&nbsp;&quot;top&quot;,
			nPosition&nbsp;:&nbsp;n
		};
		
		jindo.$Element(this._elContent).css(&quot;top&quot;,&nbsp;(htParam.nPosition&nbsp;*&nbsp;-1)&nbsp;+&nbsp;&quot;px&quot;);
		var&nbsp;oSliderV&nbsp;=&nbsp;this.getSliderVertical();
		if&nbsp;(oSliderV)&nbsp;{
			oSliderV.values(0,&nbsp;htParam.nPosition,&nbsp;false);&nbsp;//커스텀&nbsp;이벤트를&nbsp;발생하지&nbsp;않으면서&nbsp;이동
		}
		
		this._fireScrollEvent(htParam);
	},

	/**
		가로&nbsp;스크롤바의&nbsp;포지션을&nbsp;설정한다.
		
		@method&nbsp;setScrollLeft
		@param&nbsp;{Number}&nbsp;n&nbsp;포지션&nbsp;값
		@remark&nbsp;0.1.2&nbsp;버전부터&nbsp;slider&nbsp;0.3.2버전&nbsp;필요
	**/
	setScrollLeft&nbsp;:&nbsp;function(n)&nbsp;{
		n&nbsp;=&nbsp;Math.min(n,&nbsp;this._nScrollWidth);
		n&nbsp;=&nbsp;Math.max(n,&nbsp;0);
		n&nbsp;=&nbsp;Math.round(n);
		
		var&nbsp;htParam&nbsp;=&nbsp;{
			sDirection&nbsp;:&nbsp;&quot;left&quot;,
			nPosition&nbsp;:&nbsp;n
		};
		
		jindo.$Element(this._elContent).css(&quot;left&quot;,&nbsp;(htParam.nPosition&nbsp;*&nbsp;-1)&nbsp;+&quot;px&quot;);
		var&nbsp;oSliderH&nbsp;=&nbsp;this.getSliderHorizontal();
		if&nbsp;(oSliderH)&nbsp;{
			oSliderH.values(0,&nbsp;htParam.nPosition,&nbsp;false);&nbsp;//커스텀&nbsp;이벤트를&nbsp;발생하지&nbsp;않으면서&nbsp;이동
		}
		
		this._fireScrollEvent(htParam);
	},
	
	/**
		세로&nbsp;스크롤바의&nbsp;포지션을&nbsp;상대&nbsp;값으로&nbsp;설정한다.
		
		@method&nbsp;setScrollTopBy
		@param&nbsp;{Number}&nbsp;n&nbsp;상대적인&nbsp;포지션&nbsp;값
	**/
	setScrollTopBy&nbsp;:&nbsp;function(n)&nbsp;{
		this.setScrollTop(this.getScrollTop()+n);
	},

	/**
		가로&nbsp;스크롤바의&nbsp;포지션을&nbsp;상대&nbsp;값으로&nbsp;설정한다.
		
		@method&nbsp;setScrollLeftBy
		@param&nbsp;{Number}&nbsp;n&nbsp;상대적인&nbsp;포지션&nbsp;값
	**/
	setScrollLeftBy&nbsp;:&nbsp;function(n)&nbsp;{
		this.setScrollLeft(this.getScrollLeft()+n);
	},

	/**
		컨텐트&nbsp;영역의&nbsp;세로&nbsp;스크롤&nbsp;위치를&nbsp;구한다.
		
		@method&nbsp;getScrollTop
		@return&nbsp;{Number}&nbsp;세로&nbsp;스크롤&nbsp;위치
	**/
	getScrollTop&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;parseInt(jindo.$Element(this._elContent).css(&quot;top&quot;),&nbsp;10)&nbsp;*&nbsp;-1;
	},
	
	/**
		컨텐트&nbsp;영역의&nbsp;가로&nbsp;스크롤&nbsp;위치를&nbsp;구한다.
		
		@method&nbsp;getScrollLeft
		@return&nbsp;{Number}&nbsp;가로&nbsp;스크롤&nbsp;위치
	**/
	getScrollLeft&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;parseInt(jindo.$Element(this._elContent).css(&quot;left&quot;),&nbsp;10)&nbsp;*&nbsp;-1;
	},
	
	_getElementType&nbsp;:&nbsp;function(wel)&nbsp;{
		var&nbsp;sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;);
		
		if&nbsp;(wel.hasClass(sClassPrefix+&quot;track&quot;))&nbsp;{
			return&nbsp;&quot;track&quot;;
		}
		else&nbsp;if&nbsp;(wel.hasClass(sClassPrefix+&quot;thumb&quot;))&nbsp;{
			return&nbsp;&quot;thumb&quot;;
		}
		else&nbsp;if&nbsp;(wel.hasClass(sClassPrefix+&quot;button-up&quot;))&nbsp;{
			return&nbsp;&quot;button-up&quot;;
		}
		else&nbsp;if&nbsp;(wel.hasClass(sClassPrefix+&quot;button-up&quot;))&nbsp;{
			return&nbsp;&quot;button-up&quot;;
		}
		else&nbsp;if&nbsp;(wel.hasClass(sClassPrefix+&quot;button-down&quot;))&nbsp;{
			return&nbsp;&quot;button-down&quot;;
		}
		else&nbsp;if&nbsp;(wel.hasClass(sClassPrefix+&quot;button-left&quot;))&nbsp;{
			return&nbsp;&quot;button-left&quot;;
		}
		else&nbsp;if&nbsp;(wel.hasClass(sClassPrefix+&quot;button-right&quot;))&nbsp;{
			return&nbsp;&quot;button-right&quot;;
		}
		else&nbsp;{
			return&nbsp;false;
		}
	},
	
	_fireScrollEvent&nbsp;:&nbsp;function(htParam)&nbsp;{
		/**
			스크롤위치가&nbsp;바뀔&nbsp;때
			
			@event&nbsp;scroll
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{String}&nbsp;sDirection&nbsp;
			&lt;ul&gt;
			&lt;li&gt;&quot;left&quot;&lt;/li&gt;
			&lt;li&gt;&quot;top&quot;&lt;/li&gt;
			&lt;/ul&gt;
			@param&nbsp;{Number}&nbsp;nPosition&nbsp;스크롤된&nbsp;위치
			@example
				//커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oScrollBar.attach(&quot;scroll&quot;,&nbsp;function(oCustomEvent)&nbsp;{&nbsp;...&nbsp;});
		**/
		this.fireEvent(&quot;scroll&quot;,&nbsp;htParam);
	},
	
	_onWheel&nbsp;:&nbsp;function(we)&nbsp;{
		if&nbsp;(!this._bMouseEnter)&nbsp;{
			return;
		}
		we.stop(jindo.$Event.CANCEL_DEFAULT);
		
		var&nbsp;nDelta&nbsp;=&nbsp;we.mouse().delta,
			nDirection&nbsp;&nbsp;=&nbsp;nDelta===0?0:nDelta&nbsp;/&nbsp;Math.abs(nDelta)&nbsp;*&nbsp;-1,
			n&nbsp;=&nbsp;Math.ceil(Math.abs(nDelta))&nbsp;*&nbsp;nDirection&nbsp;*&nbsp;this.option(&quot;nDelta&quot;),
			bH&nbsp;=&nbsp;this.hasScrollBarHorizontal(),
			bV&nbsp;=&nbsp;this.hasScrollBarVertical();
			
		if&nbsp;(!bH&nbsp;&amp;&amp;&nbsp;!bV)&nbsp;{
			return;
		}
		
		if&nbsp;(this.hasScrollBarVertical()&nbsp;&amp;&amp;&nbsp;this._bIsEventAttachedForVertical)&nbsp;{
			this.setScrollTop(this.getScrollTop()+n);
			return;
		}
		
		this.setScrollLeft(this.getScrollLeft()+n);
	},
	
	_onMouseDown&nbsp;:&nbsp;function(el)&nbsp;{
		var&nbsp;wel&nbsp;=&nbsp;jindo.$Element(el),
			self&nbsp;=&nbsp;this,
			setScrollBy,
			sElementType&nbsp;=&nbsp;this._getElementType(wel);
		
		switch&nbsp;(sElementType)&nbsp;{
			case&nbsp;&quot;button-up&quot;&nbsp;:
				setScrollBy&nbsp;=&nbsp;function&nbsp;(n){
					self.setScrollTopBy(~~(n&nbsp;*&nbsp;-1));
				};
			break;
			case&nbsp;&quot;button-down&quot;&nbsp;:
				setScrollBy&nbsp;=&nbsp;function&nbsp;(n){
					self.setScrollTopBy(n);
				};
			break;
			case&nbsp;&quot;button-left&quot;&nbsp;:
				setScrollBy&nbsp;=&nbsp;function&nbsp;(n){
					self.setScrollLeftBy(~~(n&nbsp;*&nbsp;-1));
				};
			break;
			case&nbsp;&quot;button-right&quot;&nbsp;:
				setScrollBy&nbsp;=&nbsp;function&nbsp;(n){
					self.setScrollLeftBy(n);
				};
			break;
			default&nbsp;:
			return;
		}
		
		this._oTimer.start(function(){
			setScrollBy(16);
			return&nbsp;true;
		},&nbsp;100);
		
	},
	
	_onMouseUp&nbsp;:&nbsp;function(el)&nbsp;{
		this._oTimer.abort();
	},
	
	_onMouseEnter&nbsp;:&nbsp;function(we)&nbsp;{
		this._bMouseEnter&nbsp;=&nbsp;true;
	},
	
	_onMouseLeave&nbsp;:&nbsp;function(we)&nbsp;{
		this._bMouseEnter&nbsp;=&nbsp;false;
	},
	
	_onRollover&nbsp;:&nbsp;function(sType,&nbsp;el)&nbsp;{
		var&nbsp;wel&nbsp;=&nbsp;jindo.$Element(el),
			sClassPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;),
			sElementType&nbsp;=&nbsp;this._getElementType(wel);
		
		switch&nbsp;(sType)&nbsp;{
			case&nbsp;&quot;over&quot;&nbsp;:
				wel.addClass(sClassPrefix&nbsp;+&nbsp;sElementType&nbsp;+&nbsp;&quot;-over&quot;);		
			break;
			case&nbsp;&quot;down&quot;&nbsp;:
				wel.addClass(sClassPrefix&nbsp;+&nbsp;sElementType&nbsp;+&nbsp;&quot;-hold&quot;);
			break;
			case&nbsp;&quot;up&quot;&nbsp;:
				wel.removeClass(sClassPrefix&nbsp;+&nbsp;sElementType&nbsp;+&nbsp;&quot;-hold&quot;);
			break;
			case&nbsp;&quot;out&quot;&nbsp;:
				wel.removeClass(sClassPrefix&nbsp;+&nbsp;sElementType&nbsp;+&nbsp;&quot;-over&quot;);
			break;
		}
		
	},
	
	_initialize4Tablet&nbsp;:&nbsp;function()&nbsp;{
		
		this._fpOnTouchDragStart&nbsp;=&nbsp;jindo.$Fn(function(oEvent)&nbsp;{
			this._oPos4Tablet&nbsp;=&nbsp;oEvent.pos();
		},&nbsp;this);
		
		this._fpOnTouchDragMove&nbsp;=&nbsp;jindo.$Fn(function(oEvent)&nbsp;{
			
			if&nbsp;(!this._oPos4Tablet)&nbsp;{&nbsp;return;&nbsp;}
			
			var&nbsp;oOldPos&nbsp;=&nbsp;this._oPos4Tablet;
			var&nbsp;oNewPos&nbsp;=&nbsp;oEvent.pos();
			
			this.setScrollLeftBy(oOldPos.pageX&nbsp;-&nbsp;oNewPos.pageX);
			this.setScrollTopBy(oOldPos.pageY&nbsp;-&nbsp;oNewPos.pageY);

			this._oPos4Tablet&nbsp;=&nbsp;oNewPos;
			
			oEvent.stopDefault();
			
		},&nbsp;this);
		
		this._fpOnTouchDragEnd&nbsp;=&nbsp;jindo.$Fn(function(oEvent)&nbsp;{
			this._oPos4Tablet&nbsp;=&nbsp;null;
		},&nbsp;this);
		
	},
	
	_activate4Tablet&nbsp;:&nbsp;function()&nbsp;{
		
		var&nbsp;elEl&nbsp;=&nbsp;this._elContent;
		
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;jindo.$Element(this._el).preventTapHighlight(true);
		
		this._fpOnTouchDragStart.attach(elEl,&nbsp;&#39;touchstart&#39;);
		this._fpOnTouchDragMove.attach(elEl,&nbsp;&#39;touchmove&#39;);
		this._fpOnTouchDragEnd.attach(elEl,&nbsp;&#39;touchend&#39;);
		
	},
	
	_deactivate4Tablet&nbsp;:&nbsp;function()&nbsp;{
		
		var&nbsp;elEl&nbsp;=&nbsp;this._elContent;
		
		jindo.$Element.prototype.preventTapHighlight&nbsp;&amp;&amp;&nbsp;jindo.$Element(this._el).preventTapHighlight(false);
		
		this._fpOnTouchDragStart.detach(elEl,&nbsp;&#39;touchstart&#39;);
		this._fpOnTouchDragMove.detach(elEl,&nbsp;&#39;touchmove&#39;);
		this._fpOnTouchDragEnd.detach(elEl,&nbsp;&#39;touchend&#39;);
		
	}
	
}).extend(jindo.UIComponent);
</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>